<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-input prefix-icon="Search" style="width: 150px;" placeholder="车牌号" clearable
                        v-model="find_data.plateNum">
                    </el-input>
                    <el-input type="number" style="width: 150px;margin-left: 20px;" v-model="find_data.seats"
                        placeholder="座位数" clearable prefix-icon="Search" />

                    <el-select v-model="find_data.serviceType" :placeholder="'运营性质'"
                        style="width: 100px;margin-left: 20px;" clearable>
                        <el-option :label="'县际业务'" :value="'COUNTY_SER'"></el-option>
                        <el-option :label="'市际业务'" :value="'CITY_SER'"></el-option>
                        <el-option :label="'省际业务'" :value="'PROVINCE_SER'"></el-option>
                    </el-select>

                    <el-cascader style="width: 150px;margin-left: 20px;" v-model="curval2"
                        :options="findAllDeptList_list" :collapse-tags="true" :clearable="true"
                        :props="{ multiple: false, checkStrictly: true, emitPath: true, value: 'id', label: 'deptName' }"
                        placeholder="报账角色选择" :show-all-levels="false" @change="handleChange2">
                        <template #="{ node, data }">
                            <span>{{ data.deptName }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                    <el-date-picker style=" margin-left: 20px;width: 200px;" v-model="data_time" @change="datetime_btn"
                        type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" />
                    <el-select v-model="find_data.carStatus" :placeholder="'车辆状态'"
                        style="width: 100px;margin-left: 20px;">
                        <el-option :label="'全部车辆'" :value="''"></el-option>
                        <el-option :label="'正常车辆'" :value="'NORMAL'"></el-option>
                        <el-option :label="'报停车辆'" :value="'DESTORY'"></el-option>
                        <el-option :label="'下线车辆'" :value="'DOWN'"></el-option>
                        <el-option :label="'维修车辆'" :value="'REPAIR'"></el-option>
                    </el-select>

                    <el-select multiple collapse-tags clearable v-model="companyNums" :placeholder="'托管单位名称'"
                        style="width: 150px;margin-left:10px;">
                        <template #header>
                            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in findTrusteeshipMeComboList" :key="item.id" :label="item.companyName"
                            :value="item.companyNum">
                        </el-option>
                    </el-select>

                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;display: flex;">
                    <el-button @click="add_btn" type="primary" icon="SuccessFilled">添加</el-button>
                    <el-button :disabled="isTrustee == 1" @click="up_btn" type="warning"
                        icon="WarnTriangleFilled">修改</el-button>
                    <el-button :disabled="isTrustee == 1" @click="del_btn" type="danger"
                        icon="CircleCloseFilled">删除</el-button>
                    <el-button :disabled="isTrustee == 1" @click="setStopOffLineMd" type="primary"
                        icon="Goods">报停下线</el-button>
                    <el-button @click="setPosition_off_btn" type="primary" icon="Van">车辆停靠位置修改</el-button>
                    <el-button @click="setSetMainDriverMd" type="primary" icon="Van">主驾设置</el-button>
                    <el-button @click="cancelMainDriver" type="primary" icon="Van">取消主驾</el-button>
                    <el-button @click="ex_getWalletListForBack_btn" type="primary" icon="Share">导出</el-button>
                </div>
            </template>
            <div>
                <el-table border @header-dragend='headerdragend' @selection-change="selection_change_btn" height="67vh"
                    ref="multipleTableRef" :data="list_data" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field" :label="item.label">
                            <template v-if="item.field == 'vehicleConfig'" #="{ row, column, $index }">
                                <span>{{ vehicleConfig_fun(row.vehicleConfig) }}</span>
                            </template>
                            <template v-if="item.field == 'driverName'" #="{ row, column, $index }">
                                <span>{{ row.driverName ? row.driverName + '-' + row.driverPhone : '' }}</span>
                            </template>
                            <template v-if="item.field == 'serviceType'" #="{ row, column, $index }">
                                <span>{{ row.serviceType == 'COUNTY_SER' ? '县际包车' : row.serviceType == 'CITY_SER' ?
                                    '市际包车' :
                                    row.serviceType == 'PROVINCE_SER' ? '省际包车' : '否' }}</span>
                            </template>
                            <template v-if="item.field == 'vehicleType'" #="{ row, column, $index }">
                                <span>{{ row.vehicleType == 'BUS' ? '大巴车' : row.vehicleType == 'MINIBUS' ? '中巴车' :
                                    row.vehicleType == 'MPV' ? '商务车' : row.vehicleType == 'CAR' ? '轿车' : row.vehicleType
                                        ==
                                        'SUV' ? '越野车' : '保姆车' }}</span>
                            </template>
                            <template v-if="item.field == 'isInternet'" #="{ row, column, $index }">
                                <span>{{ row.isInternet == 0 ? '是' : '否' }}</span>
                            </template>
                            <template v-if="item.field == 'powerSource'" #="{ row, column, $index }">
                                <span>{{ row.powerSource == 'DIESEL' ? '柴油' : row.powerSource == 'GASOLINE' ? '汽油'
                                    : row.powerSource == 'CNGLNG' ? '天然气' : row.powerSource == 'NEWENERGY' ? '新能源' : ''
                                    }}</span>
                            </template>


                        </el-table-column>
                    </template>


                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total," :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:100px;z-index: 9999;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="70%" :close-on-click-modal='false'>
            <el-form :model="add_data" ref="addCarFm" label-width="130px" label-suffix="：">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="所属部门" prop="deptId" :rules="[
                            { required: true, message: '请填写所属部门', trigger: 'change' },
                        ]">
                            <el-cascader v-model="curval" :options="findAllDeptList_list" :collapse-tags="true"
                                :clearable="true"
                                :props="{ multiple: false, checkStrictly: true, emitPath: true, value: 'id', label: 'deptName' }"
                                placeholder="报账角色选择" :show-all-levels="false" @change="handleChange">
                                <template #="{ node, data }">
                                    <span>{{ data.deptName }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="停靠地点" prop="dockedLocationData.name" :rules="[
                            { required: true, message: '停靠地点', trigger: 'change' },
                        ]">
                            <el-input @click="showMap(1)" style="width: 100%" v-model="add_data.dockedLocationData.name"
                                placeholder="请选择停靠地点" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="位置简称" prop="simpleDockedAddress" :rules="[
                            {
                                required: true,
                                message: '请填写位置简称',
                                trigger: 'change',
                            },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.simpleDockedAddress" placeholder="请填写位置简称">

                            </el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="续航里程" prop="mileage" :rules="[
                            { required: true, message: '请填写续航里程', trigger: 'change' },
                        ]">
                            <el-input type="number" style="width: 100%" v-model="add_data.mileage"
                                placeholder="请填写续航里程">
                                <template #append>元</template>
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="油耗" prop="oilBurn" :rules="[
                            { required: true, message: '请填写油耗', trigger: 'change' },
                        ]">
                            <el-input type="number" style="width: 100%" v-model="add_data.oilBurn" placeholder="请填写油耗">
                                <template #append>元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="车牌号" prop="plateNum" :rules="[
                            {
                                required: true,
                                message: '请填写车牌号',
                                trigger: 'change',
                            },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.plateNum" placeholder="请填写车牌号如:川A8888">

                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="座位数" prop="seats" :rules="[
                            { required: true, message: '请填写座位数', trigger: 'change' },
                        ]">
                            <div style="display: flex;">
                                <el-button style="margin-right: 10px;" @click="needSeats_off = !needSeats_off" type="primary">选择/输入车型</el-button>

                                <el-input v-if="needSeats_off == false" @change="needSeats_change" type="number"
                                    style="width:150px" v-model="add_data.seats" placeholder="座位数">
                                    <template #append>座</template></el-input>
                                <el-select v-if="needSeats_off == true" @change="needSeats_change"
                                    v-model="add_data.seats" :placeholder="'请选择座位数'" style="width: 150px">
                                    <el-option label="5座" value="5" />
                                    <el-option label="7座" value="7" />
                                    <el-option label="9座" value="9" />
                                    <el-option label="12座" value="12" />
                                    <el-option label="14座" value="14" />
                                    <el-option label="17座" value="17" />
                                    <el-option label="39座" value="39" />
                                    <el-option label="49座" value="49" />
                                    <el-option label="55座" value="55" />
                                </el-select>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="车辆配置" prop="vehicleConfig" :rules="[
                            { required: true, message: '请填写车辆配置', trigger: 'change' },
                        ]">
                            <el-select v-model="add_data.vehicleConfig" :placeholder="'车辆配置选择'" style="width: 100%">
                                <el-option v-for="item in vehicleConfig_list" :key="item.id" :label="item.val"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="车辆类型" prop="vehicleType" :rules="[
                            { required: true, message: '请填写运营性质', trigger: 'change' },
                        ]">
                            <el-select v-model="add_data.vehicleType" :placeholder="'车辆类型选择'" @change="selectCarType"
                                style="width: 100%">
                                <el-option :label="'大巴车'" :value="'BUS'"></el-option>
                                <el-option :label="'中巴车'" :value="'MINIBUS'"></el-option>
                                <el-option :label="'商务车'" :value="'MPV'"></el-option>
                                <el-option :label="'越野车'" :value="'SUV'"></el-option>
                                <el-option :label="'轿车'" :value="'CAR'"></el-option>
                                <el-option :label="'保姆车'" :value="'BMPV'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="途强IMEI号" prop="tuqiangImei" :rules="[
                            { required: false, message: '请填写途强IMEI号', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.tuqiangImei" placeholder="请填写途强IMEI号">
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="运营性质" prop="serviceType" :rules="[
                            { required: true, message: '请填写运营性质', trigger: 'change' },
                        ]">
                            <el-select v-model="add_data.serviceType" :placeholder="'运营性质'" style="width: 100%">
                                <el-option :label="'县际业务'" :value="'COUNTY_SER'"></el-option>
                                <el-option :label="'市际业务'" :value="'CITY_SER'"></el-option>
                                <el-option :label="'省际业务'" :value="'CITY_SER'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否上网" prop="isInternet" :rules="[
                            {
                                required: true,
                                message: '请选择是否上网',
                                trigger: 'change',
                            },
                        ]">
                            <el-select v-model="add_data.isInternet" :placeholder="'请选择是否上网'" style="width: 100%">
                                <el-option :label="'上网车'" :value="'0'"></el-option>
                                <el-option :label="'非上网车'" :value="'1'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="车架号" prop="vehicleIdentifyNum" :rules="[
                            { required: false, message: '请填写途车架号', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.vehicleIdentifyNum" placeholder="请填写途车架号">
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上次保养公里数" prop="lastMaintenanceKilo" :rules="[
                            { required: false, message: '请填写上次保养公里数', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.lastMaintenanceKilo"
                                placeholder="请填写上次保养公里数">
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="间隔保养公里数" prop="intervalRemindKilo" :rules="[
                            { required: false, message: '请填写间隔保养公里数', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.intervalRemindKilo"
                                placeholder="请填写间隔保养公里数">
                            </el-input>

                        </el-form-item>
                    </el-col>


                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="维修比列" prop="repairRatio" :rules="[
                            { required: false, message: '维修比列', trigger: 'change' },
                        ]">
                            <el-input style="width: 100%" v-model="add_data.repairRatio" placeholder="维修比列">
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="动力来源" prop="powerSource" :rules="[
                            { required: false, message: '动力来源', trigger: 'change' },
                        ]">

                            <el-select v-model="add_data.powerSource" :placeholder="'动力来源'" style="width: 100%">
                                <el-option :label="'柴油'" :value="'DIESEL'"></el-option>
                                <el-option :label="'汽油'" :value="'GASOLINE'"></el-option>
                                <el-option :label="'天然气'" :value="'CNGLNG'"></el-option>
                                <el-option :label="'新能源'" :value="'NEWENERGY'"></el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>


                </el-row>
            </el-form>


            <el-button @click="ok_btn" style="margin-left:60vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 地图弹窗 -->
        <el-dialog style="margin-top:10vh;height:80vh;overflow: hidden;" v-model="map_off" title="停靠地址:" width="80%"
            :close-on-click-modal='false'>
            <div class="div_map">
                <div class="map_input">
                    <el-input @input="map_change" id='tipinput' style="width:40%" v-model="map_address"
                        placeholder="请输入住宿地址">
                        <template #prepend>住宿地址:</template>
                    </el-input>
                    <el-button @click="map_ok_btn" type="primary">确认</el-button>
                </div>
                <div v-if="map_address_list.length > 0" class="map_input2">
                    <div style="width:40%;background:#fff;margin-left:20px;padding: 10px;font-weight: 700;">
                        <div @click="map_list_btn(item)" class="div_bg" v-for="(item, index) in map_address_list"
                            :key="index" style="margin-top: 10px;">
                            {{ item.district }}-{{ item.address }}-{{ item.name }}
                        </div>
                    </div>
                </div>
                <div id="myMap" style="height: 65vh; width: 100%">
                </div>
            </div>
        </el-dialog>
        <!-- 报停下线 -->
        <el-dialog style="margin-top:5vh" v-model="setStopOffLineMd_off" :title="'报停下线'" width="40%"
            :close-on-click-modal='false'>
            <el-form :model="setStopOffLineMd_data" ref="addStopOffLineFm" label-width="130px" label-suffix="：">
                <el-form-item label="停运类型" prop="type">
                    <el-radio-group v-model="setStopOffLineMd_data.type" class="ml-4">
                        <el-radio label="1">报停</el-radio>
                        <el-radio label="2">下线</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="setStopOffLineMd_data.type == '1'">
                    <el-form-item label="报停时间" prop="destoryTime" :rules="[
                        { required: true, message: '请选择报停时间', trigger: 'change' },
                    ]">
                        <el-date-picker style="width: 240px;" v-model="setStopOffLineMd_data.destoryTime"
                            type="datetime" placeholder="请选择报停时间" format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="下线时间" prop="downTime" :rules="[
                        { required: true, message: '请选择下线时间', trigger: 'change' },
                    ]">
                        <el-date-picker style="width: 240px;" v-model="setStopOffLineMd_data.downTime" type="datetime"
                            placeholder="请选择下线时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </template>
            </el-form>


            <el-button @click="setStopOffLineMd_ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 车辆停靠位置修改 -->
        <el-dialog style="margin-top:5vh" v-model="setPosition_off" :title="'停车位置修改'" width="50%"
            :close-on-click-modal='false'>
            <el-form :model="setPosition_data" ref="addStopOffLine" label-width="130px" label-suffix="：">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="停靠位置" prop="dockedLocationData.name" :rules="[
                            {
                                required: true,
                                message: '停靠位置',
                                trigger: 'change',
                            },
                        ]">
                            <el-input @click="showMap(2)" style="width: 100%"
                                v-model="setPosition_data.dockedLocationData.name" placeholder="请选择停靠地点" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="停靠简称" prop="simpleDockedAddress">
                            <el-input v-model="setPosition_data.simpleDockedAddress" placeholder="请填写停靠简称" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>


            <el-button @click="setPosition_ok_btn" style="margin-left:40vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 车辆设置主驾/取消主驾 -->
        <el-dialog style="margin-top:5vh" v-model="setSetMainDriverMd_off" :title="'车辆设置主驾'" width="80%"
            :close-on-click-modal='false'>
            <el-form :model="findStaffList_data" :inline="true">
                <el-form-item label="驾驶员姓名:">
                    <el-input placeholder="驾驶员姓名" clearable v-model="findStaffList_data.find" style="width: 150px;" />
                </el-form-item>
                <el-form-item label="小队/小组:">
                    <el-cascader style="width: 130px;" v-model="curval3" :options="findAllDeptList_list"
                        :collapse-tags="true" :clearable="true"
                        :props="{ multiple: false, checkStrictly: true, emitPath: true, value: 'id', label: 'deptName' }"
                        placeholder="报账角色选择" :show-all-levels="false" @change="handleChange3">
                        <template #="{ node, data }">
                            <span>{{ data.deptName }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>

                <el-form-item>
                    <el-select clearable style="width: 200px;" @click="handleSelect3" @change="handleSelect4"
                        v-model="findStaffList_data.roleIds" filterable placeholder="请选择岗位角色">
                        <el-option v-for="item in getRoleList_list2" :key="item.id" :label="item.roleName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select clearable style="width: 100px;" v-model="findStaffList_data.staffState"
                        placeholder="入职状态">
                        <el-option label="正式" value="NORMAL"></el-option>
                        <el-option label="试用" value="TRY"></el-option>
                        <el-option label="挂靠" value="DEPEND"></el-option>
                        <el-option label="兼职" value="SOMETIME"></el-option>
                        <el-option label="离职" value="LEAVE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="Write_find_btn">
                        搜索
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Check" @click="Write_ok_btn">
                        确认设置
                    </el-button>
                </el-form-item>
                <el-tag style="margin-bottom:20px"><b>当前驾驶员：{{ car_people.driverName ?
                    car_people.driverName + '-' + car_people.driverPhone : '未设置' }}</b></el-tag>
            </el-form>
            <div>
                <el-table border @selection-change="selection_change_btn2" height="58vh" ref="multipleTableRef2"
                    :data="Write_data__list" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in Write_table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field" :label="item.label">
                            <template v-if="item.field == 'roleId'" #="{ row, column, $index }">
                                <span>{{ row.roleId == 22 ? '是' : '否' }}</span>
                            </template>
                            <template v-if="item.field == 'staffState'" #="{ row, column, $index }">
                                <span>{{ row.staffState == 'NORMAL' ? '正式 ' : row.staffState == 'TRY' ? '试用 ' :
                                    row.staffState == 'LEAVE' ? '离职 ' : '无'
                                    }}</span>
                            </template>
                            <template v-if="item.field == 'idCardUrl'" #="{ row, column, $index }">
                                <template v-if="row.idCardUrl.split(',')">
                                    <template v-if="row.idCardUrl.split(',')[0]">
                                        <el-image style="width: 95px; height: 95px" :preview-teleported="true"
                                            :preview-src-list="[ImageUrl + row.idCardUrl.split(',')[0]]"
                                            :src="row.idCardUrl.split(',')[0] ? ImageUrl + row.idCardUrl.split(',')[0] : ''"
                                            fit="cover">
                                            <template #error>
                                                <div>
                                                    <el-icon
                                                        style="width: 95px; height: 95px"><icon-picture /></el-icon>
                                                </div>
                                            </template>
                                        </el-image>
                                    </template>
                                    <template v-if="row.idCardUrl.split(',')[1]">
                                        <el-image style="width: 95px; height: 95px;margin-left:20px"
                                            :preview-teleported="true"
                                            :preview-src-list="[ImageUrl + row.idCardUrl.split(',')[1]]"
                                            :src="row.idCardUrl.split(',')[1] ? ImageUrl + row.idCardUrl.split(',')[1] : ''"
                                            fit="cover">
                                            <template #error>
                                                <div>
                                                    <el-icon
                                                        style="width: 95px; height: 95px"><icon-picture /></el-icon>
                                                </div>
                                            </template>
                                        </el-image>
                                    </template>
                                </template>

                            </template>
                            <template v-if="item.field == 'lookBtlBalance'" #="{ row, column, $index }">
                                {{ row.lookBtlBalance == 0 ? '否' : '是' }}
                            </template>
                            <template v-if="item.field == 'education'" #="{ row, column, $index }">
                                {{ row.education == 'PRIMARYSCHOOL' ? '小学' : row.education == 'JUNIORSCHOOL' ? '初中'
                                    : row.education == 'HIGHSCHOOL'
                                        ? '高中' : row.education == 'COLLEGEDEGREE' ? '专科' : row.education == 'BACHELOR' ? '本科'
                                            : row.education == 'MASTER'
                                                ? '硕士' : row.education == 'DOCTOR' ? '博士' : '无' }}
                            </template>
                        </el-table-column>
                    </template>

                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="Write_current_change_btn" @size-change="Write_size_change_btn"
                    v-model:current-page="findStaffList_data.page.pageNum"
                    v-model:page-size="findStaffList_data.page.pageSize" :page-sizes="[20, 50, 100, 200]"
                    :background="true" layout="prev, pager, next, jumper,->,sizes,total,"
                    :total="findStaffList_total" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import * as XLSX from 'xlsx';
import Sortable from 'sortablejs';
import AMapLoader from "@amap/amap-jsapi-loader"
import { GET_TOKEN } from '@/utils/token.js'
import { ref, reactive, onMounted, computed, watch } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, getCompanyVehiclePages, findChildDeptsByName, findAddressByLocation, getCarConfigurationType,
    adupCompanyVehicle, delCompanyVehicle, applyDestory, applyDown, setPosition, findCompanyVehicleById, setCarDriver, getDriverList,
    findStaffList, getRoleList, findTeamGroupList, exportVehicle, findTrusteeshipMeCombo

} from '@/api/security_center.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { importCusCheckInData, line2treeData, securityJsCode, key, } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {



    getPrivateSetList({
        find: '车辆列表',
        page: {
            pageNum: 1,
            pageSize: 20,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);
        }
    })

    findTrusteeshipMeCombo({
        page: {
            pageNum: 1,
            pageSize: 999,
        },
        companyName: '',
    }).then(res => {
        findTrusteeshipMeComboList.value = res.data || [];
    })

    //#endregion

    // findChildDeptsByName({
    //     deptName: '车务部'
    // }).then(res => {
    //     findAllDeptList_list.value = res.data
    //     findAllDeptList_list.value = line2treeData(findAllDeptList_list.value, 'pid')
    //     // findAllDeptList_list.value = findAllDeptList_list.value[0].children
    // })
    findTeamGroupList({
        deptNames: ['车务部']
    }).then(res => {
        findAllDeptList_list.value = res.data
        findAllDeptList_list.value = line2treeData(findAllDeptList_list.value, 'pid')
        // findAllDeptList_list.value = findAllDeptList_list.value[0].children
    })

    // getCarConfigurationType({}).then(res => {
    //     vehicleConfig_list.value = res.data
    // })
    let luser = JSON.parse(localStorage.getItem("luser"))
    let luser_companyNum = luser.companyNum
    companyNums.value = [luser_companyNum]

    setTimeout(() => {
        for (let i = 0; i < findTrusteeshipMeComboList.value.length; i++) {
            companyNums.value.push(findTrusteeshipMeComboList.value[i].companyNum)
        }
        checkAll.value = true
        list_api()
    }, 500);

    company.value = JSON.parse(localStorage.getItem("company"))
    isTrustee.value = company.value.isTrustee
})

const checkAll = ref(false)
const indeterminate = ref(false)
const findTrusteeshipMeComboList = ref([])
const companyNums = ref([])
watch(companyNums, (val) => {

    if (val.length === 0) {
        checkAll.value = false
        indeterminate.value = false
    } else if (val.length === findTrusteeshipMeComboList.value.length) {
        checkAll.value = true
        indeterminate.value = false
    } else {
        indeterminate.value = true
    }
})
const handleCheckAll = (val) => {
    indeterminate.value = false
    if (val) {
        companyNums.value = findTrusteeshipMeComboList.value.map((_) => _.companyNum)
    } else {
        companyNums.value = []
    }

}
// :disabled="isTrustee == 1"
//#region 是否托管
const company = ref({})
const isTrustee = ref(0)
//#endregion

//#region 表格数据处理
const table_data_list = reactive([
    { label: '所属单位', field: 'companyName', width: 200, off: true },
    { label: '主驾', field: 'driverName', width: 200, off: true },
    { label: '座位数', field: 'seats', width: 70, off: true },
    { label: '车牌号', field: 'plateNum', width: 100, off: true },
    { label: '可跑区域', field: "serviceType", width: 100, off: true },
    { label: '车辆类型', field: 'vehicleType', width: 100, off: true },
    { label: '车架号', field: 'vehicleIdentifyNum', width: 180, off: true },

    { label: '上次保养公里数', field: 'lastMaintenanceKilo', width: 180, off: true },
    { label: '间隔保养公里数', field: 'intervalRemindKilo', width: 180, off: true },
    { label: '维修比列', field: 'repairRatio', width: 180, off: true },
    { label: '动力来源', field: 'powerSource', width: 180, off: true },

    { label: '上次审核时间', field: 'lastCheckCarTime', width: 180, off: true },
    { label: '审车提醒时间', field: 'checkCarRemindTime', width: 180, off: true },
    { label: '审车到期时间', field: 'checkCarExpireTime', width: 180, off: true },
    { label: '上次购买保险时间', field: 'lastBuySafeTime', width: 180, off: true },
    { label: '购买保险提醒时间', field: 'buySafeRemindTime', width: 180, off: true },
    { label: '购买保险到期时间', field: 'buySafeExpireTime', width: 180, off: true },
    // { label: '车辆配置', field: 'vehicleConfig', width: 100, off: true },
    { label: '所属部门', field: 'deptName', width: 100, off: true },
    { label: '是否上网', field: 'isInternet', width: 90, off: true },
    { label: '添加时间', field: 'addTime', width: 170, off: true },
    { label: '下线时间', field: 'downTime', width: 170, off: true },
    { label: '报停时间', field: 'destoryTime', width: 170, off: true },
    { label: '续航里程', field: 'mileage', width: 100, off: true },
    { label: '正常油耗', field: 'oilBurn', width: 100, off: true },

    { label: '停靠地址全称', field: 'dockedName', width: 350, off: true },
    { label: '停靠地址简称', field: 'simpleDockedAddress', width: 170, off: true },
    { label: '途强IMEI号', field: 'tuqiangImei', width: 170, off: true },
])

const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
    console.log(table_data_list)
    console.log(table_data_list_new.value)
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '车辆列表',
        tbNum: "vehicle_list",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion

//#region 判断人数

const needSeats_change = (e) => {
    add_data.vehicleConfig = ''
    vehicleConfig_list.value = []
    let luser = JSON.parse(localStorage.getItem("luser"))
    let luser_companyNum = luser.companyNum
    getCarConfigurationType({
        stationListId: '',
        addWay: '0',
        seats: e,
        companyNum: luser_companyNum,
    }).then(res => {

        if (res.code == 1) {
            vehicleConfig_list.value = res.data
        } else {
            add_data.vehicleConfig = ''
            vehicleConfig_list.value = []
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })


}

//#region 分页列表
const vehicleConfig_fun = (e) => {
    let data = ''
    for (let i = 0; i < vehicleConfig_list.value.length; i++) {
        if (vehicleConfig_list.value[i].id == e) {
            data = vehicleConfig_list.value[i].text
        }
    }
    if (data) {
        return data
    } else {
        return ''
    }
}
const curval2 = ref([])
const handleChange2 = (valarr) => {
    if (valarr) {
        console.log('点击了', valarr);
        let resval = [];
        if (valarr.length > 0) resval = [valarr[valarr.length - 1]];
        find_data.deptId = valarr[valarr.length - 1]
    }
}
const data_time = ref('')
const datetime_btn = (x, y) => {
    if (x) {
        data_time.value = x
        find_data.stime = data_time.value[0]
        find_data.etime = data_time.value[1]
    } else {
        find_data.stime = ''
        find_data.etime = ''
    }

}


const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    plateNum: '',
    seats: '',
    serviceType: "",
    deptId: '',
    carStatus: '',
    companyNums: [],
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {
    find_data.companyNums = companyNums.value
    getCompanyVehiclePages(find_data).then(res => {
        list_data.value = res.data.list
        total.value = res.data.total
    })
}
//#endregion

//#region 添加
const curval = ref([])
const findAllDeptList_list = ref([])
const handleChange = (valarr) => {
    if (valarr) {
        console.log('点击了', valarr);
        let resval = [];
        if (valarr.length > 0) resval = [valarr[valarr.length - 1]];
        add_data.deptId = valarr[valarr.length - 1]
    }
}
// 打开地图
const marker = ref('')
const map_off = ref(false)
const map_address = ref('')
const map_address_list = ref([])
const map_value = ref({})
const map_index = ref('')
const showMap = (e) => {
    map_index.value = e
    marker.value = ''
    map_address.value = ''
    map_address_list.value = []
    map_value.value = ''
    map_off.value = true


    // 地图
    window._AMapSecurityConfig = {
        securityJsCode: securityJsCode,
    }
    // 首次加载
    AMapLoader.load({
        key: key,
        version: '2.0',
        plugins: ['AMap.Driving', 'AMap.Geolocation', 'AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch'],
    }).then((AMap) => {
        // 初始化-地图对象
        myMap.value = new AMap.Map('myMap', { zoom: 10, center: [104.065861, 30.657401] });
    }).catch(err => { console.log('高德地图加载失败：', err); });
}
const map_change = () => {
    let autoOptions = {
        city: '成都市'
    }
    var autoComplete = new AMap.Autocomplete(autoOptions);
    autoComplete.search(map_address.value, function (status, result) {
        // 搜索成功时，result即是对应的匹配数据
        let data = result.tips
        let filteredData = data.filter(obj => obj.location != "" && obj.location != null);
        map_address_list.value = filteredData.slice(0, 5)
        console.log(map_address_list.value)
    })
}

const map_list_btn = (e) => {
    map_address.value = e.district + '-' + e.address + '-' + e.name
    map_value.value = e

    myMap.value.panTo([e.location.lng, e.location.lat]);
    if (marker.value) {
        myMap.value.remove(marker.value);
    }
    myMap.value.setFitView();
    marker.value = new AMap.Marker({
        map: myMap.value,
        position: [e.location.lng, e.location.lat],
    });
    myMap.value.setFitView();
    myMap.value.add(marker.value);


}
const map_ok_btn = () => {

    // if (map_index.value == 1) {
    //     add_data.stayAddress = map_address.value
    //     add_data.stayLatLon = map_value.value.location.lng + ',' + map_value.value.location.lat
    //     map_off.value = false
    // } else if (map_index.value == 2) {
    //     add_data.homeAddress = map_address.value
    //     add_data.homeLatLon = map_value.value.location.lng + ',' + map_value.value.location.lat
    //     map_off.value = false
    // }
    if (map_index.value == 1) {
        add_data.dockedLocationData.address = map_address.value
        add_data.dockedLocationData.area = map_value.value.name
        add_data.dockedLocationData.name = map_value.value.name
        add_data.dockedLocationData.id = '0'
        add_data.dockedLocationData.isSta = '0'
        add_data.dockedLocationData.tel = '0'
        add_data.dockedLocationData.type = '0'
        add_data.dockedLocationData.lnglat = map_value.value.location.lng + ',' + map_value.value.location.lat
        map_off.value = false
    } else if (map_index.value == 2) {
        setPosition_data.dockedLocationData.address = map_address.value
        setPosition_data.dockedLocationData.area = map_value.value.name
        setPosition_data.dockedLocationData.name = map_value.value.name
        setPosition_data.dockedLocationData.id = '0'
        setPosition_data.dockedLocationData.isSta = '0'
        setPosition_data.dockedLocationData.tel = '0'
        setPosition_data.dockedLocationData.type = '0'
        setPosition_data.dockedLocationData.lnglat = map_value.value.location.lng + ',' + map_value.value.location.lat
        map_off.value = false
    }
}

const vehicleConfig_list = ref([])


const add_off = ref(false)
const title = ref('添加车辆')
const add_data = reactive({
    deptId: '',
    dockedLocationData: {
        address: "",
        area: "",
        id: "",
        isSta: "",
        lnglat: "",
        name: "",
        tel: "",
        type: "",
    },
    id: "",
    isInternet: "",
    mileage: "",
    oilBurn: "",
    plateNum: "",
    seats: "",
    serviceType: "",
    simpleDockedAddress: "",
    tuqiangImei: "",
    vehicleConfig: "",
    vehicleType: "",
    vehicleIdentifyNum: '',
    repairRatio: '0',
    powerSource: 'CNGLNG',
    lastMaintenanceKilo: '',
    intervalRemindKilo: '12000',
})
const add_btn = () => {
    title.value = '添加车辆'

    add_data.deptId = ''
    add_data.dockedLocationData.address = ''
    add_data.dockedLocationData.area = ''
    add_data.dockedLocationData.id = ''
    add_data.dockedLocationData.isSta = ''
    add_data.dockedLocationData.lnglat = ''
    add_data.dockedLocationData.name = ''
    add_data.dockedLocationData.tel = ''
    add_data.dockedLocationData.type = ''
    add_data.id = ''
    add_data.isInternet = ''
    add_data.mileage = ''
    add_data.oilBurn = ''
    add_data.plateNum = ''
    add_data.seats = ''
    add_data.serviceType = ''
    add_data.simpleDockedAddress = ''
    add_data.tuqiangImei = ''
    add_data.vehicleConfig = ''
    add_data.vehicleType = ''
    add_data.vehicleIdentifyNum = ''
    add_data.repairRatio = '0'
    add_data.powerSource = 'CNGLNG'

    add_data.lastMaintenanceKilo = ''
    add_data.intervalRemindKilo = '12000'


    curval.value = []

    add_off.value = true

}


//#endregion

//#region 表格选择
const table_list = ref([])
const headerdragend = (newWidth, oldWidth, column) => {
    console.log(newWidth, oldWidth, column)
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (column.property == table_data_list_new.value[i].field) {
            table_data_list_new.value[i].width = newWidth
        }
    }
}
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion
//#region 修改
const up_btn = async () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    title.value = '修改车辆'
    let data = ''
    await findCompanyVehicleById({ id: table_list.value[0].id }).then(res => {
        data = res.data.dockedLocationData

    })
    let luser = JSON.parse(localStorage.getItem("luser"))
    let luser_companyNum = luser.companyNum
    getCarConfigurationType({
        stationListId: '',
        addWay: '0',
        seats: table_list.value[0].seats,
        companyNum: luser_companyNum,
    }).then(res => {

        if (res.code == 1) {
            vehicleConfig_list.value = res.data
        } else {
            add_data.vehicleConfig = ''
            vehicleConfig_list.value = []
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    add_data.id = table_list.value[0].id

    add_data.deptId = table_list.value[0].deptId
    add_data.dockedLocationData.address = data.address
    add_data.dockedLocationData.area = data.area
    add_data.dockedLocationData.id = data.id
    add_data.dockedLocationData.isSta = data.isSta
    add_data.dockedLocationData.lnglat = data.lnglat
    add_data.dockedLocationData.name = data.name
    add_data.dockedLocationData.tel = data.tel
    add_data.dockedLocationData.type = data.type
    curval.value = table_list.value[0].deptId
    add_data.isInternet = String(table_list.value[0].isInternet)
    add_data.mileage = table_list.value[0].mileage
    add_data.oilBurn = table_list.value[0].oilBurn
    add_data.plateNum = table_list.value[0].plateNum

    add_data.lastMaintenanceKilo = table_list.value[0].lastMaintenanceKilo
    add_data.repairRatio = table_list.value[0].repairRatio
    add_data.powerSource = table_list.value[0].powerSource

    add_data.intervalRemindKilo = table_list.value[0].intervalRemindKilo ? table_list.value[0].intervalRemindKilo : 12000

    add_data.seats = table_list.value[0].seats
    add_data.serviceType = table_list.value[0].serviceType
    add_data.simpleDockedAddress = table_list.value[0].simpleDockedAddress
    add_data.tuqiangImei = table_list.value[0].tuqiangImei
    add_data.vehicleConfig = table_list.value[0].vehicleConfig
    add_data.vehicleType = table_list.value[0].vehicleType
    add_off.value = true
}
//#endregion

// 提交
const addCarFm = ref('')
const ok_btn = () => {
    addCarFm.value.validate((valid, fields) => {
        if (valid) {

            if (title.value == '添加车辆') {




                adupCompanyVehicle(add_data).then(res => {
                    if (res.code == 1) {
                        list_api()
                        add_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {

                adupCompanyVehicle(add_data).then(res => {
                    if (res.code == 1) {
                        list_api()
                        add_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        }
    })


}


//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认删除【${table_list.value[0].plateNum}】车辆?`,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            delCompanyVehicle({
                ids: [table_list.value[0].id]
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 搜索
const search_btn = () => {

    list_api()
}
//#endregion

//#region 报停下线
const setStopOffLineMd_off = ref(false)
const setStopOffLineMd_data = reactive({
    type: '1',
    id: '',
    downTime: '',
    destoryTime: '',
})
const setStopOffLineMd = () => {
    setStopOffLineMd_data.type = '1'
    setStopOffLineMd_data.id = ''
    setStopOffLineMd_data.downTime = ''
    setStopOffLineMd_data.destoryTime = ''
    setStopOffLineMd_off.value = true
}
const addStopOffLineFm = ref('')
const setStopOffLineMd_ok_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    addStopOffLineFm.value.validate((valid, fields) => {
        if (valid) {

            if (setStopOffLineMd_data.type == '1') {
                let ps = {
                    id: table_list.value[0].id,
                    destoryTime: setStopOffLineMd_data.destoryTime,
                }
                applyDestory(ps).then(res => {
                    if (res.code == 1) {
                        list_api()
                        setStopOffLineMd_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {
                let ps = {
                    id: table_list.value[0].id,
                    downTime: setStopOffLineMd_data.downTime,
                }
                applyDown(ps).then(res => {
                    if (res.code == 1) {
                        list_api()
                        setStopOffLineMd_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        }
    })

}
//#endregion

//#region 车辆停靠位置修改
const setPosition_off = ref(false)
const setPosition_data = reactive({
    id: '',
    simpleDockedAddress: '',
    dockedLocationData: {
        address: '',
        area: '',
        id: '',
        isSta: '',
        lnglat: '',
        name: '',
        tel: '',
        type: '',
    }
})

const needSeats_off = ref(true)

const setPosition_off_btn = async () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    let data = ''
    let data_obj = ''
    await findCompanyVehicleById({ id: table_list.value[0].id }).then(res => {
        data = res.data.dockedLocationData
        data_obj = res.data

    })
    setPosition_data.id = table_list.value[0].id
    setPosition_data.simpleDockedAddress = data_obj.simpleDockedAddress
    setPosition_data.dockedLocationData.address = data.address
    setPosition_data.dockedLocationData.area = data.area
    setPosition_data.dockedLocationData.id = data.id
    setPosition_data.dockedLocationData.isSta = data.isSta
    setPosition_data.dockedLocationData.lnglat = data.lnglat
    setPosition_data.dockedLocationData.name = data.name
    setPosition_data.dockedLocationData.tel = data.tel
    setPosition_data.dockedLocationData.type = data.type
    setPosition_off.value = true
}
const setPosition_ok_btn = () => {
    setPosition(setPosition_data).then(res => {
        if (res.code == 1) {
            list_api()
            setPosition_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            setPosition_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
//#endregion

//#region 车辆设置主驾/取消主驾
const cancelMainDriver = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认取消【${table_list.value[0].plateNum}】主驾?`,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            setCarDriver({
                id: table_list.value[0].id,
                // driverUserId: table_list.value[0].driverUserId,
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })
}

const setSetMainDriverMd_data = reactive({
    driverUserId: '',
    id: '',
})
const setSetMainDriverMd_off = ref(false)
const findStaffList_data = reactive({
    deptIds: [],
    find: '',
    roleIds: '',
    staffState: 'NORMAL',
    page: {
        pageNum: 1,
        pageSize: 20,
    },
})
const curval3 = ref('')
const handleChange3 = (valarr) => {
    if (valarr) {
        console.log('点击了', valarr);
        let resval = [];
        if (valarr.length > 0) resval = [valarr[valarr.length - 1]];
        findStaffList_data.deptIds = [valarr[valarr.length - 1]]
    } else {
        findStaffList_data.deptIds = []
    }
}
const getRoleList_list2 = ref([])
const handleSelect3 = () => {
    getRoleList({ deptIds: findStaffList_data.deptIds.join(',') }).then(res => {
        getRoleList_list2.value = res.data
    })
}
const handleSelect4 = (e) => {
    findStaffList_data.roleIds = e
}
const setSetMainDriverMd = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    setSetMainDriverMd_data.id = table_list.value[0].id
    setSetMainDriverMd_data.driverUserId = ''
    car_people.driverName = table_list.value[0].driverName
    car_people.driverPhone = table_list.value[0].driverPhone
    Write_find_btn()


    setSetMainDriverMd_off.value = true
}
const Write_data__list = ref([])
const findStaffList_total = ref(0)
const Write_find_btn = () => {
    if (!findStaffList_data.roleIds) {
        findStaffList_data.roleIds = []
    } else {
        findStaffList_data.roleIds = [findStaffList_data.roleIds]
    }
    findStaffList(findStaffList_data).then(res => {
        findStaffList_data.roleIds = findStaffList_data.roleIds[0]
        Write_data__list.value = res.data.list
        findStaffList_data.value = res.data.total
    })
}
// 分页器跳转页面
const Write_current_change_btn = () => {
    Write_find_btn()
}
// 分页器一夜显示多少数据页面
const Write_size_change_btn = () => {
    findStaffList_data.page.pageNum = 1
    Write_find_btn()
}
const car_people = reactive({
    driverName: '',
    driverPhone: '',
})
const Write_table_data_list_new = reactive([
    { label: '单位编号', field: 'companyNum', width: 110, off: true },
    { label: '姓名', field: 'staffName', width: 80, off: true },
    { label: '电话', field: 'staffPhone', width: 120, off: true },
    { label: '驾驶员', field: 'roleId', width: 80, off: true },
    { label: '入职状态', field: 'staffState', width: 100, off: true },
    { label: '入职时间', field: 'entryTime', width: 105, off: true },
    { label: '合同到期时间', field: 'expireTime', width: 110, off: true },
    { label: '所属部门', field: 'deptName', width: 100, off: true },
    { label: '角色/职务', field: 'roleName', width: 110, off: true },
    { label: '添加时间', field: 'addTime', width: 165, off: true },
    { label: '住宿地址', field: 'stayAddress', width: 220, off: true },
    { label: '学历', field: 'education', width: 100, off: true },
    { label: '是否查看银行账余额', field: 'lookBtlBalance', width: 160, off: true },
])
const table_list2 = ref('')
const selection_change_btn2 = (e) => {
    table_list2.value = e
    console.log(table_list2.value[0])
    if (e) {
        setSetMainDriverMd_data.driverUserId = table_list2.value[0].userId
    } else {
        setSetMainDriverMd_data.driverUserId = ''
    }
}
const Write_ok_btn = () => {
    if (table_list2.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    setCarDriver(setSetMainDriverMd_data).then(res => {
        if (res.code == 1) {
            list_api()
            setSetMainDriverMd_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
}
//#endregion

//#region 导出
const ex_getWalletListForBack_btn = () => {
    exportVehicle(find_data).then(res => {
        if (res.code == 1) {
            const data = [
                ['座位数', '车牌号', '可跑区域', '车辆类型', '车辆配置', '所属部门', '是否上网', '添加时间', '下线时间', '报停时间', '续航里程', '正常油耗', '停靠地址全称', '停靠地址简称', '途强IMEI号',],
            ];
            for (let i = 0; i < res.data.length; i++) {
                let ps = {
                    seats: res.data[i].seats,
                    plateNum: res.data[i].plateNum,
                    serviceType: res.data[i].serviceType == 'COUNTY_SER' ? '县际包车' : res.data[i].serviceType == 'CITY_SER' ? '市际包车' :
                        res.data[i].serviceType == 'PROVINCE_SER' ? '省际包车' : '否',
                    vehicleType: res.data[i].vehicleType == 'BUS' ? '大巴车' : res.data[i].vehicleType == 'MINIBUS' ? '中巴车' :
                        res.data[i].vehicleType == 'MPV' ? '商务车' : res.data[i].vehicleType == 'CAR' ? '轿车' : res.data[i].vehicleType ==
                            'SUV' ? '越野车' : '保姆车',
                    vehicleConfig: vehicleConfig_fun(res.data[i].vehicleConfig),
                    // vehicleConfig: res.data[i].isCheck == 'NO_CHECK' ? '未操作' : res.data[i].isCheck == 'CANCELLATION' ? '已报销' : res.data[i].isCheck == 'SETTLED' ? '已结算' : '无',
                    deptName: res.data[i].deptName,
                    isInternet: res.data[i].isInternet == 0 ? '是' : '否',
                    addTime: res.data[i].addTime,
                    downTime: res.data[i].downTime,
                    destoryTime: res.data[i].destoryTime,
                    mileage: res.data[i].mileage,
                    oilBurn: res.data[i].oilBurn,
                    dockedName: res.data[i].dockedName,
                    simpleDockedAddress: res.data[i].simpleDockedAddress,
                    tuqiangImei: res.data[i].tuqiangImei,
                    lastMaintenanceKilo: res.data[i].lastMaintenanceKilo,
                    intervalRemindKilo: res.data[i].intervalRemindKilo,

                }
                data.push(Object.values(ps))
            }

            const ws = XLSX.utils.aoa_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, '单位管理后台系统-车辆列表.xlsx');
            findCusWalletPages_list()
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }

    })
}
//#endregion

</script>

<style scoped lang='scss'>
.div_map {
    position: relative;
    left: 0;
    top: 0;
}

.map_input {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.map_input2 {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    top: 34px;

}

.div_bg:hover {


    background-color: darkgray;
}
</style>

<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
